<template>
  <div class="con">
    <header>
      <div class="left" @click="onClickLeft(shop.pid)">
        <van-icon name="arrow-left" />
        <p>返回</p>
      </div>
      <div class="center">
        <p>填写订单</p>
      </div>
      <div class="right">
        <p>帮助</p>
      </div>
    </header>
    <main>
      <div class="main1" @click="adress(shop.pid)">
        <div class="left">
          <span>
            <img src="../assets/ce.jpg" alt />
          </span>
          <div class="showadress" v-if="showads">
            <div class="top">
              <div class="t-left">
                <p class="xmspan">{{info.name}}</p>
                <p style="margin-left:10px;font-size:14px" class="dhspan">{{info.tel}}</p>
              </div>
            </div>
            <div class="bottom">
              <p class="dzspan">{{info.locality}}</p>
            </div>
          </div>

          <div class="showadress" v-if="showad1">
            <div class="top">
              <div class="t-left">
                <p class="xmspan">{{info1[0].name}}</p>
                <p style="margin-left:10px;font-size:14px" class="dhspan">{{info1[0].tel}}</p>
              </div>
            </div>
            <div class="bottom">
              <p class="dzspan">{{info1[0].locality}}</p>
            </div>
          </div>

          <p v-if="showad">请添加收货地址</p>
        </div>
        <van-icon name="arrow" />
      </div>

      <div class="main2" v-if="keat1">
        <figure>
          <img :src="shop.pimg" alt />
          <figcaption>
            <p>{{shop.pname}} {{shop.pdesc}}</p>
            <div class="fb">
              <span>￥{{shop.pprice}}</span>
            </div>
          </figcaption>
        </figure>
        <div class="right">
          <p>x{{this.$route.query.pnum}}</p>
        </div>
      </div>
      <div class="main2-hide" v-if="keat2">
        <p>商品清单</p>
        <span class="pronum">共{{pronum}}件</span>
        <div class="main2-btm">
          <div class="btm-wrap" v-for="(item,i) in prolist" :key="i">
            <img :src="item.pimg" alt />
          </div>
        </div>
      </div>

      <div class="main3">
        <div class="m-left">
          <p>支付方式</p>
          <van-icon name="question-o" class="question" />
        </div>
        <div class="m-right">
          <van-button plain type="primary" class="btn">在线支付</van-button>
          <van-button plain type="primary" class="btn">货到付款</van-button>
        </div>
      </div>

      <div class="main4">
        <div class="left">
          <p>配送</p>
          <span @click="alertMenu1">退换货细则</span>
          <van-action-sheet v-model="show1" title="食品、保健品类商品退换货细则">
            <div class="smallbox1">
              <p style="margin-top:12px">1)商品一经售出,若无质量问题，不接受7天无理由退换货。</p>
              <p>2)商品质量问题,字实际收到商品之日起7天内可退换货，15天可换货。</p>
              <p>3)注意事项</p>
              <p>根据国家相关法律规定，食品、保健食品类商品属于特殊商品，一经售出非质量问题概不退换货。</p>
              <p>说的是每次下班项目不错嘛项目下存在马晓旭表现出才能。</p>
              <p>4)凡是涉及需要顾客将还是那个品、购物凭证、包装等返回我公司办理退换货的，另需附上订购编号、接收人、联系方式。</p>
              <span @click="preserve1">确认</span>
            </div>
          </van-action-sheet>
        </div>
        <div class="right">
          <p>11月04日周一24点前送达</p>
        </div>
      </div>

      <div class="main5">
        <!-- 优惠券单元格 -->
        <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />

        <!-- 优惠券列表 -->
        <van-popup v-model="showList" position="bottom">
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>

      <div class="main6">
        <div class="top">
          <p>发票类型</p>
          <div class="top-r">
            <van-button plain type="primary" class="btn">电子普通发票</van-button>
            <van-button plain type="primary" class="btn">增值税专用发票</van-button>
          </div>
        </div>
        <div class="bottom">
          <div class="b-right">
            <p>请添加发票抬头</p>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>

      <div class="main7">
        <div class="m1">
          <p>商品总额</p>
          <span>￥{{sumupprice}}</span>
        </div>
        <div class="m2">
          <p>优惠价格</p>
          <span>-￥0</span>
        </div>
        <div class="m3">
          <p>抵用券价格</p>
          <span>-￥0</span>
        </div>
        <div class="m4">
          <p>运费</p>
          <span>+￥0</span>
        </div>
        <div class="m5">
          <p>东方购物购买须知说明点击了解退换货政策和积分优惠等更多内容</p>
        </div>
      </div>
      <div style="height:10px"></div>
    </main>
    <footer>
      <div class="money">
        <p>应付金额:</p>
        <span>￥{{sumupprice}}</span>
      </div>
      <div class="submit" @click="paymoney(shop.pid)">
        <p>提交订单</p>
        <div class="sbottom">
          <van-icon name="sign" class="sign" />
          <span>我已阅读接受东方购物退货条款</span>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元"
};
import * as api from "../../api/getproductlist";
export default {
  name: "Order",
  data() {
    return {
      id: "",
      showads: false,
      showad1: false,
      showad: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      show1: false,
      info: "",
      addadress: "请添加收获地址",
      shop: [],
      info1: [],
      keat1: "",
      keat2: "",
      sumupprice: 0,
      prolist: [],
      pronum: 0
    };
  },
  methods: {
    onClickLeft(id) {
      this.$router.push("/cart/");
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    adress(id) {
      let uid = this.$store.state.uids;
      api.getaddress({ uid: uid }).then(res => {
        if (res.data.data.length < 1) {
          this.$router.push("/adress");
        } else {
          if (typeof this.$route.query.id != "object") {
            this.$router.push({
              path: "/getinfo",
              query: {
                id: id,
                pnum: this.$route.query.pnum
              }
            });
          } else {
            let chosenArr = [];
            for (let i = 0; i < this.prolist.length; i++) {
              chosenArr.push(this.prolist[i].pid);
            }
            this.$router.push({
              path: "/getinfo",
              query: {
                id: chosenArr,
                price: this.$route.query.price
              }
            });
          }
        }
      });
    },
    alertMenu1() {
      this.show1 = true;
    },
    preserve1() {
      this.show1 = false;
    },
    paymoney(id) {
      let dzp = document.querySelector(".dzspan");
      let dhp = document.querySelector(".dhspan");
      let xmp = document.querySelector(".xmspan");

      let uid = this.$store.state.uids;

      // 提交订单
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = "" + m;
      if (m.length < 2) {
        m = "0" + m;
      }
      let r = date.getDate();
      r = "" + r;
      if (r.length < 2) {
        r = "0" + r;
      }
      let h = date.getHours();
      h = "" + h;
      if (h.length < 2) {
        h = "0" + h;
      }
      let html = "";
      html = `${y}${m}${r}${h}`;
      if (typeof this.$route.query.id == "number") {
        api
          .deletecart({ uid: uid, pid: this.$route.query.id })
          .then(data => {});
      } else {
        api
          .deletecarts({ uid: uid, pids: this.$route.query.id })
          .then(data => {});
      }
      console.log(uid);
      uid=parseInt(uid)
      api
        .postorder({
          uid: uid,
          pid: this.$route.query.id,
          pprice: this.sumupprice,
          ispay: false,
          pimg: this.shop.pimg,
          message: {
            address: dzp.innerHTML,
            name: xmp.innerHTML,
            tel: dhp.innerHTML
          }
        })
        .then(data => {
          this.$toast.success("提交订单成功");
          let oid = data.data.oid;
          console.log(data);

          this.$router.push({
            path: "/pay",
            query: {
              id: this.$route.query.id,
              pprice: this.sumupprice,
              oid: oid
            }
          });
        });
    }
  },
  mounted() {
    if (
      typeof this.$route.query.id == "object" &&
      this.$route.query.id.length > 1
    ) {
      this.keat1 = false;
      this.keat2 = true;
      this.sumupprice = parseInt(this.$route.query.price);
      let resArr = this.$route.query.id;
      let prolist = [];
      for (let i = 0; i < resArr.length; i++) {
        api.getproinfo({ pid: resArr[i] }).then(data => {
          prolist.push(data.data.data);
        });
      }
      this.prolist = prolist;
      this.pronum = resArr.length;
      //查询所有的地址
      let uid = this.$store.state.uids;
      api.getaddress({ uid: uid }).then(res => {
        this.info1 = res.data.data;
        if (res.data.data.length < 1) {
          this.showad = true;
        } else {
          this.showad1 = true;
          //获取单个收获地址
          api
            .getaddressinfo({ uid: uid, aid: this.$route.query.aid })
            .then(res => {
              if (this.$route.query.aid && this.$route.query.aid != 1) {
                this.showads = true;
                this.showad1 = false;
              }
              if (this.$route.query.aid == 1) {
                this.showad1 = true;
                this.showads = false;
              }
              this.info = res.data.data;
            });
        }
      });
    } else {
      this.keat1 = true;
      this.keat2 = false;
      api.getproinfo({ pid: this.$route.query.id }).then(data => {
        this.shop = data.data.data;
        this.sumupprice = this.shop.pprice * this.$route.query.pnum;

        //查询所有的地址
        let uid = this.$store.state.uids;
        api.getaddress({ uid: uid }).then(res => {
          this.info1 = res.data.data;
          if (res.data.data.length < 1) {
            this.showad = true;
          } else {
            this.showad1 = true;
            //获取单个收获地址
            api
              .getaddressinfo({ uid: uid, aid: this.$route.query.aid })
              .then(res => {
                if (this.$route.query.aid && this.$route.query.aid != 1) {
                  this.showads = true;
                  this.showad1 = false;
                }
                if (this.$route.query.aid == 1) {
                  this.showad1 = true;
                  this.showads = false;
                }
                this.info = res.data.data;
              });
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.food p {
  margin-top: 16px;
}
.warn {
  font-size: 14px;
}
.van-action-sheet__close {
  top: 330px;
  background: red;
  width: 375px;
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 50px;
}
* {
  margin: 0;
  padding: 0;
}
.con {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  height: 76px;
  background: #e63217;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  font-size: 16px;
  color: white;
}
header .left {
  display: flex;
  align-items: center;
}
header .left p {
  margin-left: 5px;
}
header .center p {
  font-size: 18px;
}
main {
  flex: 1;
  overflow: auto;
}
.main1 {
  display: flex;
  align-items: center;
  padding-right: 20px;
  height: 100px;
  justify-content: space-between;
  font-size: 16px;
  color: #666666;
}
.main1 .left {
  display: flex;
  align-items: center;
}
.main1 .left span img {
  display: block;
  width: 8px;
  height: 100px;
  background: #cd321c;
  margin-right: 10px;
}
.main1 .t-left {
  display: flex;
}
.main2 {
  display: flex;
  padding: 0 14px;
  align-items: center;
  border-top: 6px solid #f3f3f3;
  border-bottom: 6px solid #f3f3f3;
  height: 100px;
  justify-content: space-between;
}
.main2-hide {
  height: 140px;
  padding: 0 14px;
  position: relative;
  border-top: 6px solid #f3f3f3;
  border-bottom: 6px solid #f3f3f3;
}
.main2-hide p {
  height: 40px;
  line-height: 40px;
  font-size: 15px;
}
.main2-hide .main2-btm {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  width: 85%;
}
.pronum {
  position: absolute;
  color: #333333;
  bottom: 60px;
  margin: auto;
  right: 20px;
}
.btm-wrap {
  border: 1px solid #d3d3d3;
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  margin-right: 8px;
}
.btm-wrap img {
  width: 100%;
  height: 100%;
}
.main2 figure {
  height: 80px;
  width: 250px;
  display: flex;
}
.main2 figure img {
  display: block;
  width: 80px;
  height: 80px;
  background: yellow;
}
.main2 figcaption {
  height: 80px;
  display: flex;
  flex-direction: column;
  margin-left: 6px;
  justify-content: space-between;
}
.main2 figcaption p {
  font-size: 14px;
  color: #333333;
}
.main2 figcaption .fb {
  display: flex;
}
.main2 figcaption span {
  font-size: 14px;
  color: #e52a0b;
  font-weight: 500;
}
.main2 .p1 {
  font-size: 12px;
  width: 20px;
  background: #f2645a;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 5px;
}
.main2 .p2 {
  font-size: 14px;
  color: #7e7e7e;
}
.main2 .right p {
  font-size: 16px;
}
.main3 {
  display: flex;
  height: 50px;
  align-items: center;
  padding: 0 13px;
  justify-content: space-between;
  border-bottom: 6px solid #f3f3f3;
}
.main3 .m-left {
  display: flex;
  font-size: 14px;
  height: 20px;
}
.main3 .question {
  margin-top: 3px;
  margin-left: 4px;
}
.main3 .btn {
  line-height: 30px;
  width: 80px;
  height: 30px;
  border: 1px solid #dadada;
  color: #7f7f7f;
}
.main4 {
  display: flex;
  height: 60px;
  align-items: center;
  padding: 0 13px;
  justify-content: space-between;
  border-bottom: 6px solid #f3f3f3;
}
.main4 .left p {
  height: 20px;
  font-size: 14px;
  color: #333333;
}
.main4 .left span {
  margin-top: 5px;
  border-bottom: 1px solid #999999;
  font-size: 12px;
  color: #9c9c9c;
}
.main4 .right p {
  font-size: 14px;
  color: #666666;
}

.main5 {
  display: flex;
  height: 50px;
  align-items: center;
  padding: 0 13px;
  justify-content: space-between;
  border-bottom: 6px solid #f3f3f3;
}
.main6 {
  height: 100px;
  border-bottom: 6px solid #f3f3f3;
  padding: 0 13px;
}
.main6 .top {
  height: 50px;
  border-bottom: 1px solid #dddddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main6 .btn {
  line-height: 30px;
  height: 30px;
  border: 1px solid #dadada;
  color: #7f7f7f;
  padding: 0 10px;
  margin-right: 2px;
}
.main6 .top p {
  font-size: 14px;
  color: #333333;
}
.main6 .bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.b-right {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 16px;
}
.main7 {
  margin: 0 13px;
}
.main7 .m1,
.m2,
.m3,
.m4 {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666666;
}
.main7 .m5 {
  font-size: 12px;
  display: flex;
  justify-content: center;
  color: #999;
  border-bottom: 1px solid #999;
}

footer {
  height: 46px;
  display: flex;
  border-top: 1px solid #dddddd;
}
.money {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.money p {
  font-size: 12px;
  color: #757575;
}
.money span {
  font-size: 12px;
  color: #cd321c;
  font-weight: 500;
}
.submit {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
  background: #e73d23;
}
.submit p {
  margin-bottom: 2px;
}
.sbottom {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
}
.sign {
  margin-top: 4px;
  margin-right: 2px;
}
.van-coupon-list__list {
  height: 300px !important;
}
.smallbox1 {
  height: 335px;
  font-size: 18px;
  border-top: 1px solid #f3f3f3;
  position: relative;
}

.smallbox1 p {
  margin-top: 18px;
  padding-left: 8px;
  color: #6b6b6b;
  font-size: 16px;
}
.smallbox1 span {
  position: absolute;
  bottom: 0;
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  background: #f83112;
  font-size: 16px !important;
  color: white !important;
}

.top {
  display: flex;
  justify-content: space-between;
}
.top .left {
  display: flex;
}
.top .t-left {
  font-size: 18px;
  color: #3e3d39;
}
.top .t-left span {
  width: 50px;
  height: 25px;
  background: #e5290c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-left: 10px;
}
.bottom {
  margin-top: 10px;
}
.records {
  font-size: 20px;
}
</style>